<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tabs切换</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .title {
            display: flex;
        }

        .title li {
            margin-right: 15px;
            cursor: pointer;
        }

        .title .active {
            color: red;
        }

        .content li {
            display: none;
        }

        .content .active {
            display: block !important;
        }
    </style>
</head>

<body>
    <div class="app">
        <ul class="title">
            <li :class=" index == currentIndex ? 'active' : '' "
                @click=" currentIndex = index"
                v-for="item,index in tabs" :key="index">
                {{ item.title }}
            </li>
        </ul>

        <ul class="content">
            <li v-for="item,index in tabs" :key="index" 
                :class=" index == currentIndex ? 'active' : '' ">
                <p v-for="v,i in item.content">{{ v.text }}</p>
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    new Vue({
        el: '.app',
        data: {
            currentIndex: 0,
            tabs: [
                {
                    id: 1,
                    title: '社会',
                    content: [
                        { text: '社会的内容1' },
                        { text: '社会的内容2' },
                        { text: '社会的内容3' }
                    ]
                },
                {
                    id: 2,
                    title: '经济',
                    content: [
                        { text: '经济 的内容1' },
                        { text: '经济 的内容2' },
                        { text: '经济 的内容3' },
                        { text: '经济 的内容4' },
                    ]
                },
                {
                    id: 3,
                    title: '体育',
                    content: [
                        { text: '体育 的内容1' },
                        { text: '体育 的内容2' }
                    ]
                },
                {
                    id: 4,
                    title: '科技',
                    content: [
                        { text: '科技 的内容1' },
                        { text: '科技 的内容2' },
                        { text: '科技 的内容3' },
                    ]
                }
            ]
        },
        methods: {
            changeActive(index) {
                this.currentIndex = index
            }
        }
    })
</script>

</html>